<template>
  <div class="yccMoneyIndex">
    <c-title :hide="false" :text="infoData.plugin_name"></c-title>
    <diyBackGround :minHeight="'8.63rem'"></diyBackGround>
    <div class="yccMoneyDetail" @click="toUrl('baseRewardTemplate',{},{api:'plugin.ycc-money.frontend.index.indexPage'})">查看明细</div>
    <div class="contenBox">
      <div class="detail_box" v-if="infoData.plugin_member">
        <span class="txt">可用{{ infoData.plugin_name }}</span>
        <span class="price">{{ infoData.plugin_member.amount }}</span>
        <span class="txt_b">冻结{{ infoData.plugin_name }}{{ infoData.plugin_member.frozen_amount }}</span>
      </div>
      <div class="entrance">
        <div class="line" v-if="infoData.recharge_status" @click="toUrl('YccRecharge')">
          <div class="line_left">
            <i class="iconfont icon-chongzhi3"></i>
            充值
          </div>
          <i class="iconfont icon-icon_more"></i>
        </div>
        <div class="line" v-if="infoData.withdraw_income_status" @click="toUrl('Ycc_withdrawals')">
          <div class="line_left">
            <i class="iconfont icon-tixian4"></i>
            提现
          </div>
          <i class="iconfont icon-icon_more"></i>
        </div>
        <div class="line" v-if="infoData.exchange_frozen_love_status" @click="toUrl('YccformFrozenLove')">
          <div class="line_left">
            <i class="iconfont icon-zhuanhuan"></i>
            转换
          </div>
          <i class="iconfont icon-icon_more"></i>
        </div>
        <div class="line" v-if="infoData.move_status" @click="toUrl('baseTransferTemplate', {}, { plu: 'ycc-money' })">
          <div class="line_left">
            <i class="iconfont icon-huzhuan"></i>
            互转
          </div>
          <i class="iconfont icon-icon_more"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import diyBackGround from "../member/balance/componet/diyBackGround.vue";
export default {
  data() {
    return {
      infoData: {}
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    toUrl(key, params, query) {
      this.$router.push(this.fun.getUrl(key, params, query));
    },
    getData() {
      $http.get("plugin.ycc-money.frontend.index.index", "", "").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.infoData = res.data;
        this.fun.setWXTitle(this.infoData.plugin_name);
      });
    }
  },
  components: {
    diyBackGround
  }
};
</script>
<style lang="scss" scoped>
.yccMoneyDetail {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 0.85rem;
  border-radius: 1.09rem 0rem 0rem 1.09rem;
  position: fixed;
  top: 7.5rem;
  right: 0;
  background: rgba(0, 0, 28, 0.3);
  color: #fff;
}
.contenBox {
  margin: 0 0.75rem;
  margin-top: -6.63rem;
  .entrance {
    background: #fff;
    padding-bottom: 1.5rem;
    padding-top: 1.59rem;
    .line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.84rem 0 0.97rem;
      margin-bottom: 1.5rem;
      .line_left {
        display: flex;
        align-items: center;
        font-size: 0.88rem;
        .iconfont {
          margin-right: 0.56rem;
          font-size: 1.5rem;
        }
      }
      .icon-icon_more {
        color: #aaaab3;
        font-size: 0.6rem;
      }
    }
    .line:last-child{
      margin-bottom: 1.5rem;
    }
  }
  .detail_box {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0.63rem;
    padding: 1.25rem 0 1.5rem 0;
    background: #fff;
    border-radius: 0.63rem;
    .price {
      font-size: 1.38rem;
      font-weight: bold;
      color: #333333;
      margin: 1rem 0;
      line-height: 1.5rem;
    }
    .txt {
      font-size: 0.81rem;
      color: #6e6e79;
    }
    .txt_b {
      color: #999999;
      font-size: 0.75rem;
    }
  }
}
</style>
